<template>
  <q-layout view="lHh lpR lFf">
    <q-drawer v-model="leftDrawerOpen" show-if-above side="left" elevated>
      <!-- drawer content -->
      <div class="text-h4 text-center q-pa-lg">
        <q-icon name="admin_panel_settings" />
        管理员界面
      </div>
      <q-separator></q-separator>
      <q-list>
        <q-expansion-item
          expand-separator
          default-opened
          class="text-h6"
          label="课程管理"
        >
          <q-tabs v-model="tab" vertical inline-label @click="route(1)">
            <q-tab name="viewCourse" icon="view_agenda" label="总览课程" />
            <q-tab name="addCourse" icon="add" label="添加课程" />
          </q-tabs>
        </q-expansion-item>
      </q-list>
      <q-expansion-item
        expand-separator
        default-opened
        class="text-h6"
        label="用户管理"
      >
        <q-tabs
          v-if="role != 2"
          v-model="tab"
          vertical
          inline-label
          @click="route(2)"
        >
          <q-tab name="viewUser" icon="people" label="用户总览" />
          <q-tab name="statUser" icon="leaderboard" label="流量统计" />
        </q-tabs>
        <q-item class="fixed-bottom" to="/index">返回主页面</q-item>
      </q-expansion-item>
    </q-drawer>
    <q-page-container>
      <router-view :current="tab" />
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref } from "vue";
import "src/css/manage.scss";
import { useRouter } from "vue-router";
const leftDrawerOpen = ref(false);
const tab = ref("addCourse");
function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value;
}
const router = useRouter();
function route(tar) {
  const url = "/manage" + (tar == 1 ? "/course" : "/user");
  router.push(url);
}
</script>
